<!-- 门店设置页 -->
<template>
	<view v-if="shenheStatus == 0" class="page-setting">
		<view class="header">
			<!-- 社区头像 -->
			<view class="headerFt" @click="modifyAvatar">
				<view class="headerFtHs">社区头像</view>
				<view class="headerFt1">
					<image class="imgStyle mr10" :src="mdInfo.cover_url" mode=""></image>
					<u-icon color="#888888" size="23rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 社区名称 -->
			<view class="headerFt" @click="goCommunityName">
				<view class="headerFtHs">社区名称</view>
				<view class="headerFt1">
					<view class="darun mr10">{{mdInfo.name}}</view>
					<u-icon color="#888888" size="23rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="headerFt" @click="changeMobile">
				<view class="headerFtHs">联系方式</view>
				<view class="headerFt1">
					<view class="darun mr10">{{mdInfo.mobile}}</view>
					<u-icon color="#888888" size="23rpx" name="arrow-right"></u-icon>
				</view>
			</view>
			<!-- 所在地区 -->
			<view class="headerFtAddress">
				<view class="headerFtHs">
					所在地区
				</view>
				<view class="headerFt1" @click="viewAddress">
					<view class="mr10">
						<u-icon color="#888888" name="map"></u-icon>
					</view>
					<view class="darun">定位</view>
				</view>
			</view>
			<!-- 所在地区填写 -->
			<textarea style="height: 100rpx" v-model="mdInfo.address" placeholder-style="color:#B6B6B6"
				placeholder="省市区县、乡镇等"></textarea>
		</view>
		<!-- 营业时间 -->
		<view class="contents" @click="changeTime">
			<view class="headerFtAddress">
				<view class="headerFtHs">
					营业时间
				</view>
				<view class="headerFt1">
					<view class="darun mr10">{{mdInfo.start_time}}-{{mdInfo.end_time}}</view>
					<view class="" style="height: 40rpx;display: flex;align-items: center;">
						<u-icon color="#888888" size="23rpx" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 店铺打烊 -->
		<!-- <view class="setting-box">
			<text>{{ $t('mdAdmin.business') }}</text>
			<u-switch v-model="isOpen" activeColor="#F0250E" size="44" @change="switchChange"></u-switch>
		</view> -->
		<view class="footer">
			<view class="">
				<view class="footerName">
					店铺营业
				</view>
				<view class="footerRemind mt5">
					提醒：店铺非营业时间将不可以购买商品
				</view>
			</view>
			<view class="">
				<u-switch v-model="isOpen" activeColor="#F0250E" size="44" @change="switchChange"></u-switch>
			</view>
		</view>
		<view class="btn" @click="sure">
			提交
		</view>

		<u-popup v-model="show" mode="center" border-radius="14" :closeable="true">
			<view style=" width: 92vw; margin: 0 auto; padding: 70rpx;">
				<u-input placeholder="请输入电话号" v-model="mdInfo.mobile" type="number" :border="true" />
				<view class="" style="margin-top: 20rpx;">
					<u-button type="error" shape="circle" @click="changeSure">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showName" mode="center" border-radius="14" :closeable="true">
			<view style=" width: 92vw; margin: 0 auto; padding: 70rpx;">
				<u-input placeholder="请输入店铺名称" v-model="mdInfo.name"  :border="true" />
				<view class="" style="margin-top: 20rpx;">
					<u-button type="error" shape="circle" @click="changeSure1">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-picker :default-time="arr" mode="time" title="营业开始时间" v-model="showTime" :params="params"
			@confirm="confirm"></u-picker>
		<u-picker :default-time="arr1" mode="time" title="营业结束时间" v-model="showTime1" :params="params1"
			@confirm="confirm1"></u-picker>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from '@/components/shenhe/shenhe';
	export default {
		components: {
			Shenhe
		},
		data() {
			return {
				showTime: false,
				showTime1: false,
				isOpen: false,
				mdInfo: {

				},
				show: false,
				showName:false,
				// 默认选择时间器
				arr: '',
				arr1: '',
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				params1: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
			};
		},
		onLoad() {
			this.getMdCenterData();
		},
		computed: {},
		onShow() {},
		onReady() {
			this.arr = this.mdInfo.start_time
			this.arr1 = this.mdInfo.end_time
		},
		watch: {},
		methods: {
			// 开始时间返回
			confirm(value) {
				this.mdInfo.start_time = `${value.hour}:${value.minute}`
				this.showTime1 = true
			},
			// 结束时间返回
			confirm1(value) {
				this.mdInfo.end_time = `${value.hour}:${value.minute}`
			},
			// 点击弹出框确认修改赋值
			changeSure() {
				this.show = false
			},
			// 点击弹出框确认修改赋值
			changeSure1() {
				this.showName = false
			},
			// 点击提交修改
			sure() {
				uni.showLoading({
					title: '提交中',
				});
				this.$allrequest.mdAdmin
					.mdPreserve({
						cover_url: this.mdInfo.cover_url,
						name: this.mdInfo.name,
						mobile: this.mdInfo.mobile,
						address: this.mdInfo.address,
						start_time: this.mdInfo.start_time,
						end_time: this.mdInfo.end_time,
						open_status: Number(this.isOpen)

					})
					.then(res => {
						uni.hideLoading();
						if (!res.code) {
							uni.showToast({
								title: res.data,
								icon: 'success',
							});
							setTimeout(() => {
								uni.redirectTo({
									url: "/md_admin/md-center/md"
								})
							}, 1500);
						} else {
							uni.showToast({
								title: "修改失败",
								icon: 'none',
							});
							uni.redirectTo({
								url: "/md_admin/md-center/md"
							})
						}
					});

			},
			// 点击修改营业时间
			changeTime() {
				this.showTime = true
			},
			// 点击修改电话
			changeMobile() {
				this.show = true
			},
			// 点击修改头像
			modifyAvatar() {
				const that=this
				try {
				  this.$utils.uploadImage(
				    1,
				    async (res) => {
					this.mdInfo.cover_url =res
				     
				    },
				    () => {
				      this.$utils.toast(this.$t("user.imgFail"));
				    }
				  );
				} catch (error) {
				}
			},
			// 点击社区名称跳转页面修改社区名称
			goCommunityName() {
				this.showName=true
			},
			// 点击地图图标查看位置并返回坐标
			viewAddress() {
				// 打开地图选择并返回地理位置
				uni.chooseLocation({
					success: (res) => {
						this.mdInfo.address = res.address
						this.mdInfo.latitude = res.latitude
						this.mdInfo.longitude = res.longitude
					}
				});
			},
			// 获取初始化数据
			getMdCenterData() {
				uni.showLoading({
					title: this.$t('home.loading'),
				});
				this.$allrequest.mdAdmin
					.getMdCenterData()
					.then(res => {
						uni.hideLoading();
						if (!res.code) {
							this.mdInfo = res.data;
							this.isOpen = Number(res.data.open_status);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					})
					.catch(err => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					})
			},


			// 修改数据开关
			updateSetting() {
				uni.showLoading({
					title: this.$t('home.loading'),
				});
				this.$allrequest.mdAdmin
					.mdCenterSetting({
						open_status: Number(this.isOpen)
					})
					.then(res => {
						uni.hideLoading();
						if (!res.code) {
							uni.showToast({
								title: this.$t('mdAdmin.setSuc'),
								icon: 'none',
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						}
					});
			},
			switchChange(e) {
				this.updateSetting();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.btn {
		width: 678rpx;
		height: 88rpx;
		background: #F0250E;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 80rpx auto;
	}

	.mt5 {
		margin-top: 5rpx;
	}

	.footerName {
		width: 120rpx;
		height: 42rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.footerRemind {
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #8C8C8C;
		font-style: normal;
		text-transform: none;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92vw;
		margin: 26rpx auto;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 30rpx 24rpx;
	}

	.contents {
		width: 92vw;
		margin: 26rpx auto;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 24rpx;
	}

	.darun {
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #262626;
		font-style: normal;
		text-transform: none;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.headerFtHs {
		height: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: rgba(29, 29, 29, 0.94);
		font-style: normal;
		text-transform: none;
	}

	.imgStyle {
		width: 88rpx;
		height: 88rpx;
		background: #F2F2F2;
		border-radius: 120rpx 120rpx 120rpx 120rpx;
	}

	.header {
		width: 92vw;
		margin: 0 auto;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0rpx 24rpx;
	}

	.headerFt {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F8F8F8;
		padding: 30rpx 0rpx;
	}

	.headerFtAddress {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0rpx;
	}

	.headerFt1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page-setting {
		width: 100%;
		min-height: 100vh;
		background: #f2f2f2;
		position: relative;
		padding-top: 24rpx;

		.setting-box {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;
			padding: 0 30rpx;
			height: 100rpx;

			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(29, 29, 29, 0.94);
			}
		}
	}
</style>